<template>
    <!--搜索-->
    <el-form :inline="true" :model="formData" class="demo-form-inline">
        <el-form-item label="视频编号">
            <el-input v-model="formData.id" placeholder="请输入ID编号" clearable />
        </el-form-item>
        <el-form-item label="视频名称">
            <el-input v-model="formData.videoName" placeholder="请输入视频名称" clearable />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button type="success" @click="onAdd">新增</el-button>
        </el-form-item>
    </el-form>

    <!--列表-->
    <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="id" label="编号" width="90" />
        <el-table-column prop="videoName" label="视频名称" width="150" />
        <el-table-column prop="authorId" label="作者名称" width="120" />
        <el-table-column prop="coverUrl" label="视频封面" width="120">
            <template #default="scope">
                <img :src="scope.row.coverUrl" alt="" width="60" height="60">
            </template>
        </el-table-column>
        <el-table-column prop="viewCount" label="播放量" width="90" />
        <el-table-column prop="createdTime" label="创建时间" width="160" />

        <el-table-column prop="videoUrl" label="视频源文件" width="120">
            <template #default="scope">
                <video controls width="100%" height="80">
                    <source :src="scope.row.videoUrl" type="video/mp4">
                </video>
            </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="150">
            <template #default="scope">
                <el-button type="warning" size="small" @click="handleClick(scope.row)">编辑</el-button>
                <el-button type="danger" size="small" @click="officeClick(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="pageData.pageNum" v-model:page-size="pageData.pageSize"
        :page-sizes="[4, 10, 15, 20]" layout="total, sizes, prev, pager, next,jumper" :total="pageData.total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, ref, reactive } from 'vue';
// import axios from 'axios';
import { VideosApi } from '../../api';
const tableData = ref([])
const value = ref(true)
const formData = reactive({
    id: '',
    videoName: '',
})
const pageData = reactive({
    total: 0,
    pageSize: 4,
    pageNum: 1
})

onMounted(() => {
    VideosDataApi()

})

const VideosDataApi = () => {
    
    let id = formData.id == '' ? undefined : formData.id
    let videoName = formData.videoName == '' ? undefined : formData.videoName
    VideosApi.select.call({
        id: id, videoName: videoName,
        pageNum: pageData.pageNum,
        pageSize: pageData.pageSize

    }).then(res => {
        console.log(res);
        // tableData.value=res
        tableData.value = res.items
        pageData.total = res.total
    })

}

const onSubmit = () => {
    console.log('查询');
    VideosDataApi()
}
import { useRouter } from 'vue-router';
const router = useRouter()

const handleClick = (row) => {
    console.log('编辑', row.id)
    router.push({ name: 'videosEdit', query: { id: row.id } })
}

const officeClick = (row) => {
    console.log("下线", row);
    ElMessageBox.confirm(
        '您是否要对' + row.cname + '进行下线操作?',
        '警告！',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            VideosApi.delete.call({ id: row.id }).then(res => {
                console.log(res);

                ElMessage({
                    type: 'success',
                    message: row.cname + '下线成功，可在后台编辑上线',
                })

            })
            //回调函数 ，重新刷新数据
            categoryDataApi()
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消成功，如需下线请重新选择',
            })
        })
}
const handleSizeChange = (val) => {
    console.log(`${val} items per page`)
    pageData.pageSize = val
    VideosDataApi()
}
const handleCurrentChange = (val) => {
    pageData.pageNum = val
    VideosDataApi()
}
const onAdd = () => { 
    router.push({name:'videosAdd'})
}
</script>

<style scoped>
.demo-form-inline{
    margin-top: 20px;
}
</style>